<template>
	<div class="content">
		<input type="text" placeholder="搜索"/>
		<ul class="kind">
			<li v-for="(v,i) in this.$store.state.home.kind" :key="i">
				<img :src="v.img" />
				<p>{{v.title}}</p>
			</li>
		</ul>
	</div>
</template>

<script>
</script>

<style scoped="scoped">
	.kind{
		width: 100%;
		/* height: 1rem; */
		margin-top: 0.1rem;
		
	}
	.kind li{
		width: 25%;
		height: 0.75rem;
		float: left;
		/* background-color: red; */
		margin-top: 0.1rem;
		text-align: center;
	}
	.content{
		padding-top: 0.7rem;
	}
	.content img{
		width: 0.52rem;
		margin-bottom: 0.05rem;
	}
	input{
		width:93%;
		height: 0.38rem;
		margin: 0.05rem 0.1rem;
		border-width:0.01rem ;
		border-color:#f5f5f5 ;
		border-style: solid;
		border-radius: 0.05rem;
	}
	input::-webkit-input-placeholder{
	        text-align: center;
			color: #e0e0e0;
	}
</style>
